import { Image, Text, View } from "@tarojs/components";
import './index.scss'
import PropTypes from 'prop-types'
import NotifyIcon from '../../assets/notify.png'
import classNames from 'classnames'
import BeansIcon from '../../assets/beans.png'
import AuthIcon2 from '../../assets/auth2.png'
import LoveIcon from '../../assets/love.png'
import InviteIcon from '../../assets/invite.png'
import { timestampFormat } from "../../utils";

const timelineType = {
  0: NotifyIcon,
  1: InviteIcon,
  2: LoveIcon
}

function formatContent (timeline) {
  const { type, content, name } = timeline
  if (type === 0) {
    return content
  } else if (type === 1) {
    return `${name} 关注了您`
  }
}

/**
 * 时间线
 * @author zeng
 * @date   2020/5/20 8:55
 */
export default function GTimeline (props) {
  const { data } = props
  return (
    <View className='g-timeline'>
      {
        data.map((timeline, index) => (
          <View key={index + ''} className={classNames('g-timeline-item flex-row', index === (data.length - 1) && 'g-timeline-item--last')}>
            <View className='g-timeline-item-left flex-col'>
              <View className='g-timeline-item-icon-box'>
                <Image className='g-timeline-item-icon' src={timelineType[timeline.type]} />
                { timeline.news && <View className='g-timeline-item-dot' /> }
              </View>
              <View className='g-timeline-item-tail' />
            </View>
            <View className='g-timeline-item-right'>
              {
                {
                  0: (
                    <Text className='g-timeline-item-label'>{timeline.content}</Text>
                  ),
                  1: (
                    <Text className='g-timeline-item-label'>
                      <Text className='g-timeline-item-label--bold'>{timeline.name} </Text>关注了您
                    </Text>
                  ),
                  2: (
                    <Text className='g-timeline-item-label'>
                      <Text className='g-timeline-item-label--bold'>{timeline.name}</Text> 喜欢了 <Text className='g-timeline-item-label--bold'>{timeline.cardName} </Text>
                    </Text>
                  )
                }[timeline.type]
              }
              <View className='g-timeline-footer'>
                <Text className='g-timeline-datetime'>{timestampFormat(timeline.time)}</Text>
              </View>
            </View>
          </View>
        ))
      }
    </View>
  )
}
GTimeline.options = {
  addGlobalClass: true
}
GTimeline.defaultProps = {
 data: [ // 需要 当前用户信息、触发通知的用户信息、通知的信息（用户喜欢了你的哪个帖子），时间
   {
     type: 1,
     name: '曾小晨',
     news: true,
     time: new Date('2020-05-19')
   },
   {
     type: 0,
     content: '特朗普发表了关于新冠肺炎的言论',
     news: true,
     time: new Date()
   },
   {
     type: 0,
     content: '特朗普发表了关于新冠肺炎的言论',
     news: true,
     time: new Date()
   },
   {
     type: 0,
     content: '特朗普发表了关于新冠肺炎的言论特朗普发表了关于新冠肺炎的言论特朗普发表了关于新冠肺炎的言论',
     news: true,
     time: new Date()
   },
   {
     type: 0,
     content: '特朗普发表了关于新冠肺炎的言论',
     time: new Date()
   },
   {
     type: 0,
     content: '特朗普发表了关于新冠肺炎的言论',
     time: new Date()
   },
   {
     type: 0,
     content: '特朗普发表了关于新冠肺炎的言论',
     news: true,
     time: new Date()
   },
   {
     type: 0,
     content: '特朗普发表了关于新冠肺炎的言论',
     news: true,
     time: new Date()
   },
   {
     type: 0,
     content: '特朗普发表了关于新冠肺炎的言论',
     news: true,
     time: new Date()
   },
   {
     type: 2,
     name: 'zeng',
     cardName: '长沙之行',
     news: true,
     time: new Date()
   },
   {
     type: 0,
     content: '特朗普发表了关于新冠肺炎的言论',
     news: true,
     time: new Date()
   },
   {
     type: 0,
     content: '特朗普发表了关于新冠肺炎的言论',
     news: true,
     time: new Date()
   },
 ]
}
GTimeline.propTypes = {
  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
}
